<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <!-- 

        Web Storage 网页存储技术  (不能设置过期时间)
        1. 存储在本地客户端 (浏览器)   服务器才能查看  以域名为单位 
        2. localStorage  sessionStroage  查看方式 (F12 查看 控制台  - application - storage )
        2.1 localStorage 和  sessionStroage 的区别    对象  直接当做对象来操作  
        a. localStorage 可以永久存储 (人为删除)  sessionStroage 临时存储 (网页关闭或者浏览器关闭 自动清除数据)
        3. 获取 Storage 方法  getItem  getItem(key)    localStroage.key 
        4. 设置 Storage 方法  setItem  setItem(key,value)     localStorage.key = value 
        5. 清除数据  removeItem  clear
        6. 对象 或者 数组 存储  转为 字符串  JSON.stringify  JSON.parse
        7. localStorage.length 长度  localStorage.key(index) 获取对应的key 便利所有的key 
        8. 监听 Storage 更新   实现跨页面访问   不能跨域名访问 不同服务器不能访问 
      -->
    <script>
        var cookie = document.cookie;
        
        console.log(localStorage)
        localStorage.setItem("username","zuozuomu")
        localStorage.setItem("pass","abc123")
        localStorage.lgc = "hello2107"   // localStorage.setItem("lgc","hello2107")


        console.log(localStorage.getItem('username'))
        console.log(localStorage.lgc)

        sessionStorage.setItem("token","wh2107daydayup")
        sessionStorage.setItem("message","天道酬勤-yyds")
        
        // 判断页面打开的次数  visitcount
        if(localStorage.visitcount){
            localStorage.visitcount++  // 先 getItem 然后再setItem
            document.getElementById("app").innerHTML = "谢谢你的第"+localStorage.visitcount+"次访问,3Q!!!!"
        }else{
            // 第一次访问
            localStorage.visitcount = 1;
            document.getElementById("app").innerHTML = "你是尊贵的新用户,谢谢光临啊 ~~~"
        }

        // localStorage.clear()  清空Stroage 
        localStorage.removeItem('lgc')   //清除某一项数据

        var mylists = [
            {
                username:"雷小虎",
                age:28,
                salary:16000,
                word:"你尽管努力,其他交给大左"
            },
            {
                username:"张文凯",
                age:24,
                salary:15000,
                word:"多写代码,多总结,多背面试题"
            },
        ]

        localStorage.setItem("mylists",JSON.stringify(mylists))
        console.log(JSON.parse(localStorage.getItem("mylists")))
        
        
        var info = "wuhan2107__"
        for(var i=0;i<mylists.length;i++){
            localStorage.setItem(info+mylists[i].username,JSON.stringify(mylists[i]))
        }
        
        // 1. 正则  2. indexOf 
        var reg = /^wuhan2107__/

        for(var i=0;i<localStorage.length;i++){
            var key = localStorage.key(i)
            // if(reg.test(key)){
            //     console.log(key)
            // }
            if(key.indexOf(info)==0){
                console.log(key)
                var value = JSON.parse(localStorage.getItem(key))
                console.log(value)
                localStorage.removeItem(key)
            }
        }

        // 监听storage 更新  相互监听
        window.addEventListener("storage",function(e){
            console.log(e)
            console.log("storage 更新了...")
        })
    </script>
</body>
</html>